<template>
  <div class="block-">
    <i class="el-icon-setting" @click="dialogVisible = true"></i>
    <el-dialog
      :title="$t('Settings')"
      :visible.sync="dialogVisible"
      width="550"
      height="470"
      :center="true"
      :modal="false"
    >
      <el-tabs tab-position="left" style="height: 200px;">
        <el-tab-pane class="text-center" :label="$t('关于软件')">
          <h4>{{$t('version')+ version }}</h4>
          <h4>
            <el-button
              type="primary"
              v-if="start"
              :loading="loading"
              size="mini"
              @click="autoUpdater"
              plain
              v-text="$t('检查更新')"
            ></el-button>
            <br />
            <el-progress v-show="percentage" :percentage="idpercentage" status="success"></el-progress>
          </h4>
          <h4>Copyright © 2019 北京哈工科教机器人科技有限公司</h4>
        </el-tab-pane>
        <el-tab-pane class="text-center" :label="$t('其他设置')">
          <h4>
            <el-tooltip class="item" effect="dark" :content="$t('重新初始化')" placement="top">
              <el-button type="primary" :loading="loading" size="mini" @click="zip" v-text="$t('initialization')" plain></el-button>
            </el-tooltip>
          </h4>
        </el-tab-pane>
        <el-tab-pane  :label="$t('更新记录')">
          <h4 style="text-align:center;">2020-04-09</h4>
            <p>1.增加arduino的中英切换</p>
            <p>2.修复arduino块的bug</p>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import { version } from "../../package.json";
import { ipcRenderer } from "electron";

export default {
  data() {
    return {
      dialogVisible: false,
      version,
      loading: false,
      idDownload: false,
      percentage: false,
      idpercentage: 0,
      idinstall: false,
      start: true,
      qzgx: false
    };
  },
  watch: {
    idpercentage(v) {
      if (v == 100) {
        this.idDownload = false;
        let x = this.$t("cancel");
        if (this.qzgx) {
          x = this.$t("关闭后安装");
        }
        this.$confirm(this.$t("下载完成是否现在安装?"), this.$t("Tips"), {
          confirmButtonText: this.$t("Determine"),
          cancelButtonText: x,
          type: "warning"
        })
          .then(() => {
            this.install();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: this.$t("cancel")
            });
          });
      }
    }
  },
  async mounted() {
    ipcRenderer.send("autoUpdater", "init");
    ipcRenderer.on("检查更新", (event, arg) => {
      this.qzgx = arg.qzgx;
      this.idDownload = arg.download;
      this.loading = false;
      this.start = arg.download;
      if (arg.download) {
        if (arg.qzgx) {
          this.$notify({
            title: this.$t("update"),
            message: this.$t("将要更新"),
            duration: 0
          });
        } else {
          this.$confirm(this.$t("发现新版本是否更新"), this.$t("Tips"), {
            confirmButtonText: this.$t("Determine"),
            cancelButtonText: this.$t("cancel"),
            type: "warning"
          })
            .then(() => {
              this.updatesoftware();
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: this.$t("cancel")
              });
            });
        }
      } else {
        this.$message({
          type: "info",
          message: this.$t("没有新版本")
        });
      }
    });
    ipcRenderer.on("开始更新", (event, arg) => {
      this.start = false;
      this.percentage = true;
      this.idpercentage = arg.percentage;
    });
  },
  methods: {
    autoUpdater() {
      ipcRenderer.send("autoUpdater", this.$t("检查更新"));
      this.loading = true;
    },
    updatesoftware() {
      ipcRenderer.send("autoUpdater", this.$t("开始更新"));
      this.idDownload = false;
    },
    install() {
      ipcRenderer.send("autoUpdater", this.$t("开始安装"));
    },
    zip() {
      this.$confirm(this.$t("确定要初始化") + "?", this.$t("Tips"), {
        confirmButtonText: this.$t("Determine"),
        cancelButtonText: this.$t("cancel"),
        type: "warning"
      })
        .then(() => {
          window.location.href = "/zip.html";
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    }
  }
};
</script>

<style scoped>
.block- {
  display: inline-block;
  height: 21px;
  width: 40px;
  text-align: end;
}
.el-icon-setting {
  font-size: 18px;
  line-height: 1;
  color: #f2f6fc;
  cursor: pointer;
  vertical-align: middle;
}
.text-center {
  text-align: center;
}
h4 {
  font-size: 14px;
  padding-top: 20px;
}
</style>
